import React, { useState } from 'react';
import { Button, Input, Typography, Row, Col, message } from 'antd';

const { TextArea } = Input;
const { Title } = Typography;

const EmailGenerator = () => {
  const [selectedType, setSelectedType] = useState('发送祝贺');
  const [inputContent, setInputContent] = useState('');
  const [generatedContent, setGeneratedContent] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);

  const emailTypes = [
    '发送祝贺',
    '邀请参会',
    '跟进事件',
    '通知',
    '计划',
    '人员介绍'
  ];

  const handleTypeSelect = (type) => {
    setSelectedType(type);
  };

  const handleGenerate = () => {
    if (!inputContent.trim()) {
      message.error('邮件主题不能为空');
      return;
    }
    
    // 设置生成中状态
    setIsGenerating(true);
    message.loading('生成内容中，请稍后...', 2);
    
    // 模拟生成过程（实际场景中可能是API调用）
    setTimeout(() => {
      setGeneratedContent(`基于"${selectedType}"类型生成的邮件内容示例...`);
      setIsGenerating(false);
      message.success('内容生成成功');
    }, 2000);
  };

  const handleCopy = () => {
    if (generatedContent) {
      navigator.clipboard.writeText(generatedContent);
      message.success('复制成功');
    } else {
      message.warning('没有内容可复制');
    }
  };

  return (
    <div style={{ padding: '20px 50px' }}>
      <Title level={5} style={{ fontSize: '16px', marginBottom: '20px', fontWeight: 'bold' }}>智能撰写</Title>
      
      {/* 邮件类型选择按钮 */}
      <div style={{ marginBottom: '20px' }}>
        {emailTypes.map(type => (
          <Button 
            key={type}
            style={{ 
              height: '40px',
              marginRight: '10px',
              borderRadius: '4px',
              borderColor: selectedType === type ? '#1890ff' : '#d9d9d9',
              color: selectedType === type ? '#1890ff' : 'rgba(0, 0, 0, 0.65)',
              backgroundColor: 'white',
              boxShadow: 'none',
              padding: '0 15px',
              fontSize: '14px'
            }}
            onClick={() => handleTypeSelect(type)}
          >
            {type}
          </Button>
        ))}
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <div style={{ marginBottom: '10px', fontSize: '14px', color: 'rgba(0, 0, 0, 0.65)' }}>
          请描述您的邮件主题，邮件目的及关键内容要点:
        </div>
        <TextArea 
          rows={6} 
          value={inputContent}
          onChange={(e) => setInputContent(e.target.value)}
          style={{ 
            marginTop: '5px',
            resize: 'none',
            border: '1px solid #d9d9d9',
            borderRadius: '2px',
            padding: '10px'
          }}
        />
      </div>
      
      <div>
        <Row align="middle" style={{ marginBottom: '10px' }}>
          <Col>
            <span style={{ fontSize: '14px', color: 'rgba(0, 0, 0, 0.65)' }}>生成邮件:</span>
          </Col>
          <Col>
            <Button 
              size="small" 
              style={{ 
                marginLeft: '10px', 
                borderColor: '#1890ff',
                color: '#1890ff',
                backgroundColor: 'white',
                borderRadius: '4px',
                fontSize: '12px',
                height: '24px',
                padding: '0 8px'
              }}
              onClick={handleCopy}
            >
              复制内容
            </Button>
          </Col>
          <Col>
            <Button 
              size="small" 
              loading={isGenerating}
              style={{ 
                marginLeft: '10px', 
                borderColor: '#52c41a',
                color: isGenerating ? 'rgba(0, 0, 0, 0.25)' : '#52c41a',
                backgroundColor: 'white',
                borderRadius: '4px',
                fontSize: '12px',
                height: '24px',
                padding: '0 8px'
              }}
              onClick={handleGenerate}
              disabled={isGenerating}
            >
              {isGenerating ? '生成中...' : '生成内容'}
            </Button>
          </Col>
        </Row>
        <TextArea 
          rows={12} 
          value={generatedContent}
          onChange={(e) => setGeneratedContent(e.target.value)}
          style={{ 
            resize: 'none',
            border: '1px solid #d9d9d9',
            borderRadius: '2px',
            padding: '10px'
          }}
        />
      </div>
    </div>
  );
};

export default EmailGenerator;